<template>

  <view :class="pageList[pages][0]">
    <view :class="pageList[pages][1]">
      <view :class="pageList[pages][2]"
        :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px;'">
        <slot></slot>
      </view>
    </view>
  </view>

</template>

<script>
export default {
  props: {
    pages: {
      type: String,
      default: "",
    }
  },
  data () {
    return {
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      pageList: {
        index: ["home_top_bg", "top_bgimg", "top_cont"],
        classification: ["classification_top_bg", "classification_bgimg", "classification_cont"],
        video: ["video_top_bg", "videotop_bgimg", "video_cont"],
        shoppingCarts: ["shoppingCarts_top_bg", "shoppingCarts_bgimg", "shoppingCarts_cont"],
        mySetting: ["mySetting_top_bg", "mySetting_bgimg", "mySetting_cont"],
        search: ["search_top_bg", "search_bgimg", "search_cont"],
      }
    }
  },
  created () {
    var self = this
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.home_top_bg {
  width: 100%;
  height: 540rpx;
  position: absolute;
  top: -15%;
  border-bottom-right-radius: 30%;
  border-bottom-left-radius: 30%;
  background: linear-gradient(to right, #2162fc, #46b0fa);
  .top_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    background-size: 100%;
    color: black;
    font-size: 32rpx;
    background: linear-gradient(to right, #2162fc, #46b0fa);
  }
  .top_cont {
    display: flex;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
  }
}

.classification_top_bg {
  .classification_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background: #fff;
  }
  .classification_cont {
    display: flex;
    align-items: center;
    background: #fff;
  }
}

.video_top_bg {
  background: #fff;
  .video_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    .video_cont {
      display: flex;
      align-items: center;
      height: 100%;
    }
  }
}

.shoppingCarts_top_bg {
  background: #fff;
  .shoppingCarts_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    color: black;
  }
  .shoppingCarts_cont {
    display: flex;
    align-items: center;
  }
}

.mySetting_top_bg {
  width: 100%;
  position: absolute;
  .mySetting_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
  .mySetting_cont {
    display: flex;
    align-items: center;
  }
}

.search_top_bg {
  .search_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    background-size: 100%;
    color: black;
    background: #fff;
    font-size: 32rpx;
  }

  .search_cont {
    display: flex;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
  }
}
</style>


